<template>
  <!-- 拼团 -->
  <view class="p-collage" :style="{background:bg}">
    <view class="_join">
      <view class="_avator">
        <x-image :src="detail.userHeadImg"></x-image>
      </view>
      <view class="md">
        <text class="nick-name line-clamp-1" style="margin-right: 15px">{{ detail.userNickname }}</text>
        <text>只差<text style="color:#DE3A2E">{{detail.groupBalance}}</text>人成团</text>
      </view>
      <view class="_button" @click="onCollage(detail)">去参团</view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';

export default {
  name: 'XCollage',
  components: {
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: null
    },
    bg: {
      type: String,
      default: '#FFFFFF'
    }
  },
  data() {
    return {
    };
  },
  computed: {
  },
  watch: {},
  created() {
  },
  mounted() {

  },
  methods: {
    onCollage(item) {
      this.$emit('joinGroup', item);
    }
  }
};
</script>

<style lang="scss">
// 拼团
  .p-collage{
    width: 100%;height: 100px;background: #fff; border-bottom: 2px solid #F7F8FA;
    ._join{
      display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid #F7F8FA;height: 100px;
      ._avator{
        width: 56px;
        height: 56px;
        border-radius: 50%;
        overflow: hidden;
      }
      .md{
        flex:1;
        margin-left: 12px;
        font-size: 28px;
        line-height: 44px;
        color: #323233;
        text-align: left;
        display: flex;
        .nick-name{
          width: 200px;
        }
      }
      ._button{
        width: 120px;
        height: 54px;
        line-height: 54px;
        font-size: 26px;
        text-align: center;
        background: $uni-color-primary;
        color: #fff;
        border-radius: 100px;
      }
    }
    ._join:last-child{
      border: none;
    }
  }
  .collage:last-child{
    border: none;
  }
</style>
